<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title>QQ简易聊天框</title>
    <link rel="stylesheet" href="css/chat.css">
    <style>
    	.clearfix:after{
    		display:table;
    		content: "";
    		clear:both;
    	}
    	.fl{
    		float:left;
    	}
    </style>
</head>
<body>
<section id="chat">
    <div class="chatBody"></div>
    <div><img src="images/icon.jpg"></div>
    <textarea class="chatText"></textarea>
    <div class="btn"><span>关闭(C)</span><span id="send">发送(S)</span></div>
</section>
<script src="jquery-3.2.1.js"></script>
<script>
	$(function(){
		$("#send").click(function(){
			var $chat=$("<div class='chat clearfix'></div>");
			$(".chatBody").append($chat);
			var $img=$("<img class='fl' src='images/head03.jpg' style='margin-right:10px'/>");
			var $cnt=$("<div class='cnt fl'></div>");
			var $name=$("<div class='name'>Sunshine</div>");
			var $txt=$("<div class='txt'>"+$(".chatText").val()+"</div>");
			$(".chatText").val("")
			$cnt.append($name);
			$cnt.append($txt);
			$chat.append($img);	
			$chat.append($cnt);	
			var sh=$(".chatBody")[0].scrollHeight;
			$(".chatBody").scrollTop(sh);
			
		});
	});
</script>
</body>
</html>